<template>
    <el-container>
      <el-header>项目列表</el-header>
      <el-main>
        <el-row >
          <el-col :span="6" :offset="1">
            <div @click="AddPro" class="kjfs">
            <el-card class="cards">
              <div>
                <img src="image/add.png" class="add">
              </div>
            </el-card>
            </div>
          </el-col>
            <el-col :span="6" v-for="(item, index) in projectList" :offset="index > 0 ? 1 : 1">

                <div  @click= "routerTo(item.id)" class="routergo">

                <el-card class="cards" > 
                  <div class="namediv">
                    <span>{{item.name |ellipsis}}</span> 
                  </div>
                <div class="block">
                  <el-image  :src= "item.Image" class="image" v-if="item.Image != ''">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                </div>
                
                <div class="subscript" style="float: right;font-size: 10px;">
                  <span v-for="(i,index) in py" v-if="item.ProjectType.id == i.id "> {{i.name}}</span>
                </div>
                <div class="butomDiv">
                  <div class="prodesc">{{item.Description}}</div>
                  <div class="apicount">接口数量 {{item.api.length}} </div>
                  <div class="butdiv">
                      <el-button @click="Proeditor($event,item)">编辑</el-button>
                  </div>
                </div>
                </el-card>
                </div>
            </el-col>
        </el-row>

        <el-drawer
          title="新建项目"
          custom-class="drawer"
          :destroyOnClose = "true"
          :visible.sync="drawer"
          direction="ltr"
          :before-close="handleClose"
          ref="drawer">
          <div class="formdiv" >
          <el-form :model="form">
            <el-form-item label="项目名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目描述" :label-width="formLabelWidth">
              <el-input v-model="form.desc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目类型" :label-width="formLabelWidth">
              <el-select v-model="form.type" placeholder="请选择活动区域">
                <el-option v-for="(item,index) in py" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          </div>
            <el-button @click="SavePro">提交</el-button>
        </el-drawer>

        <el-drawer
            width="30%"
            title="新增域名"
            direction="ltr"
            :visible.sync="innerVisible">
            <el-form :model="host">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="host.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="域名" :label-width="formLabelWidth">
              <el-input v-model="host.hostname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="ip" :label-width="formLabelWidth">
              <el-input v-model="host.ip" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="环境" :label-width="formLabelWidth">
              <el-select v-model="host.service" placeholder="请选择活动区域">
                <el-option v-for="item in services" :label="item.desc" :key="item.name" :value="item.id">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.desc }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            </el-form>
            <el-button @click="AddHost">添加HOST</el-button>
        </el-drawer>

        <el-drawer
            width="30%"
            title="新增分组"
            direction="ltr"
            :visible.sync="GroupShow">
            <el-form :model="fromGroup">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="fromGroup.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="简介" :label-width="formLabelWidth">
              <el-input v-model="fromGroup.Desc" autocomplete="off"></el-input>
            </el-form-item>
            </el-form>
            <el-button @click="AddGroup">添加分组</el-button>
        </el-drawer>

        <el-drawer
            title="编辑项目"
            :visible.sync="editorshow"
            size="30%">
            <div class="proitem">
                <el-form :model="proinfo">
                    <el-form-item label="项目名称">
                        <el-input v-model="proinfo.Name" autocomplete="off" class="par_new_input"></el-input>
                    </el-form-item>
                    <el-form-item label="项目描述" >
                        <el-input v-model="proinfo.Description" autocomplete="off" class="par_new_input"></el-input>
                    </el-form-item>
                    <el-form-item label="项目类型">
                        <el-select v-model="proinfo.ProjectType" placeholder="请选择活动区域">
                            <el-option :label="i.name" v-for="(i,index) in py" :value="i.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch
                        v-model="proinfo.Status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="启用"
                        inactive-text="停用">
                        </el-switch>
                    </el-form-item>
                </el-form>
            </div>
            <div style="margin-left: 35%;margin-bottom: 20px;"><el-button @click="ProSave">保存项目信息</el-button></div>
            <div>
            <el-button @click="innerVisible = true">添加host</el-button> <el-button @click="GroupShow=true">添加分组</el-button>
            <el-drawer
             title="HOST"
             :modal="false"
             :append-to-body="true"
             :before-close="handleClose"
             :visible.sync="innerDrawer">
            </el-drawer>
            </div>
        </el-drawer>
        <!-- <el-dialog title="编辑项目" :visible.sync="editorshow">
        </el-dialog> -->
      </el-main>
  </el-container>
</template>

<script>
import {proadd,projects,getpy,apiedt,addser,addhost,getserv,addgroup} from '../../api/autopay'; 
export default {
    name: 'ProjectList',
    filters: {
      ellipsis (value) {
        if (!value) return ''
        if (value.length > 13) {
          return value.slice(0,13) + '...'
        }
        return value
      }
    },
    data(){
        return {
            currentDate: new Date(),
            projectList: [],
            py:[],
            GroupShow:false,
            innerDrawer:false,
            drawer:false,
            loading: false,
            innerVisible:false,
            services:[],
            editorshow:false,
            proinfo:{},
            Pro_id:0,
            form: {
              name: '手迹造字ForWeChat',
              user: sessionStorage.userId,
              type: 0,
              desc: '手迹造字微信小程序'
            },
            service:{
              name:"FORMAL",
              desc:"正式"
            },
            host:{
              service : 0,
              name : "测试",
              hostname : "hwdev.xiezixiansheng.com",
              ip : "xxx.xxx.xxx.xxx",
              project: 0
            },
            fromGroup:{
              name:"优惠券",
              Desc:"优惠券模块",
              project:0
            },
            formLabelWidth: '50px',
        }
    },
    mounted:function () {
        this.getProject();
        this.getProjectTy();
        this.Services();
    },
    methods: {
        AddGroup(){
          var that = this;
          that.fromGroup.project = that.Pro_id;
          addgroup(that.fromGroup).then(res=>{
                  let {code, msg, data} = res;
                  if (code == 200){
                      that.$message("分组信息添加成功");
                  }else{
                      that.$message.error("分组信息添加失败")
                  }
              }).catch(
              function(error){
                  that.$message.error(error)
          })
        },
        Proeditor(e,item){
            var that = this;
            e.stopPropagation();
            that.editorshow = true;
            that.proinfo = item;
            that.Pro_id = item.id;
        },
        ProSave(){
            var that = this;
            console.log(that.proinfo);
        },
        AddHost() {
            var that = this;
            let par = {"name":that.host.name,"hostname":that.host.hostname,"ip":that.host.ip,"project":this.$route.params.ProId,"service":that.host.service}
            addhost(par).then(res=>{
                let {code, msg, data} = res;
                if (code == 200){
                    that.$message("域名添加成功");
                }else{
                    that.$message.error("域名添加失败")
                }
            }).catch(
            function(error){
                that.$message.error(error)
            })
        },
        addservice() {
        },
      Services(){
        getserv().then(res => {
          var that = this;
          let { code, msg, data } = res;
          that.services = data.list;
        }).catch()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      SavePro() {
        var that = this;
        let par = {"name": that.form.name,"type":that.form.type,"desc":that.form.desc,"user":parseInt(that.form.user)};
        proadd(par).then(res =>{
          let { msg, code, data } = res; 
          if (code == 200) {
            that.$message("项目添加成功");
            that.host.project = data.id;
            that.innerVisible = true;
            that.drawer = false;
            that.getProject();
          }
        }).catch()
        
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },
      routerTo(id) {
        sessionStorage.setItem('ProId',id);
        this.$router.push({ name: 'ApiList', params: { ProId: id }});
      },
      AddPro() {
        this.drawer = true;
      },
      getProjectTy(){
        getpy().then(res => {
          var that = this;
          let { code, msg, data } = res;
          that.py = data.list;
        }).catch()
      },
      getProject() {
        projects().then(res => {
          var that = this;
          let { code, msg, data } = res;
          that.projectList = data.list;
          }).catch()
      }
    }//methods
}
</script>

<style>
  .time {
    
    color: #999;
  }
  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    /*height: 80%;*/
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  .namediv{
    height: 100px;
    /*padding: 14px;*/
    font-size: 40px;
    float: center;
    /*margin-left: 10px;*/
  }
  .cards{
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    height: 280px;
    width: 460px;
    /*background: "rgba(245, 52, 9, 0.8)";*/
    /*margin-bottom: 10px;*/
  }
  .clearfix:after {
      clear: both
  }
  .add {
    height: 100px;
    width: 100px;
    text-align: center;
    margin-left: 12%;
    margin-top: 16%;
  }
  header {
    text-align: center;
    font-size: 30px;
  }
  .con{
    height: 250px;
    width: 200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 100px;
    position: relative;
    /*background-color: #4cd964;*/
  }
  .subscript{
    /*右上角标签*/
    color: #fff;
    height: 30px;
    width: 100px;
    position: absolute;
    /*right: -50px;*/
    text-align: center;
    line-height: 30px;
    font-family: "黑体";
    left: 85%;
    top: 11px;
    background-color: #0c60ee;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  .drawer{
    /*background-color: rgba(255, 255, 255, 0.14);*/
  }
  .formdiv{
    margin-left: 10%;
    margin-right: 50px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    height: 600px;
    width: 400px;
    /*background-color: #FFFFFF;*/
  }
  .butomDiv{
    margin-top: 50px;
  }
  .butdiv{
    overflow: hidden;
    height: 100px;
    position:absolute;
    width: 100px;
    margin-left: 70%;
    
    text-align: right;
  }
  .apicount{
    overflow: hidden;
    position:absolute;
    /*margin-top: 100px;*/
    font-size: 20px;
    margin-left: 30%;
  }
  .routergo{
    margin-bottom: 20px; 
    /*距离第二行高度*/
  }
  .proitem{
    padding: 10px;
    margin-left: 30%;
  }
  .prodesc{
    overflow: hidden;
    position:absolute;
    /*margin-top: 100px;*/
    font-size: 10px;
    color: #477096;
  }
  
  .par_new_input input{
    width: 265px;
    padding: 0px;
    white-space: nowrap;
    text-align: center;
    /*background-color: #F56C6C;*/
}
.transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>